<template>
    <div class="pad">
        <!-- search start -->
        <!--<searchBar-->
            <!--@handleSearch="init"-->
        <!--/>-->
        <!-- search end -->

        <!-- table start -->
        <tableDataEl
            :tableData="tableData.list"
            :tableLabel="tableLabel"
            :page.sync="page"
            :pageSize.sync="pageSize"
            @handleDetail="handleDetail"
            v-loading="loading"
            :pageCount="tableData.rows"
            height="88vh"
        />
        <!-- table end -->

        <!-- dialog start -->
            <el-dialog
                :visible.sync="isShowDetail"
                title="物料详情"
                center
                width="40%"
                v-el-drag-dialog
                @close="Object.keys(paramsStr).forEach((key) => paramsStr[key] = '')"
                top="10vh"
            >
                <div v-loading="detailLoading">
                    <el-form label-width="100px" label-position="left">
                    <el-form-item label="维修厂名称">
                        {{detailData['company']}}
                    </el-form-item>
                    <el-form-item label="维修厂电话">
                        {{detailData['phone']}}
                    </el-form-item>
                    <el-form-item label="详细地址">
                        {{detailData['province']}}{{detailData['city']}}{{detailData['county']}}
                    </el-form-item>
                    <el-form-item label="设置供应商">
                        <el-select v-model="paramsStr.gid" placeholder="请选择供应商">
                            <el-option
                                    v-for="item in gysArray"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                    <el-table
                            border
                            :data="detailData.detail"
                            style="margin-top:20px;"
                            height="250"
                    >
                        <el-table-column
                                label="物料名称"
                                prop="materiel"
                                align="center"
                        />
                        <el-table-column
                                label="数量"
                                prop="num"
                                align="center"
                        />
                        <el-table-column
                                label="备注"
                                prop="remarks"
                                align="center"
                        />
                    </el-table>

                    <div style="text-align:center;margin-top:20px;">
                        <el-button type="primary" @click="adopt">通过</el-button>
                        <!--<el-button type="warning" @click="reject">驳回</el-button>-->
                    </div>
                </div>
                <!--<el-dialog-->
                    <!--:visible.sync="inputReason"-->
                    <!--width="30%"-->
                    <!--append-to-body-->
                    <!--@close="$refs['childform'].resetFields()"-->
                <!--&gt;-->
                    <!--<el-form-->
                            <!--ref="childform"-->
                            <!--label-width="80px"-->
                            <!--label-position="left"-->
                            <!--:model="paramsStr"-->
                            <!--:rules="rules"-->
                    <!--&gt;-->
                        <!--<el-form-item-->
                                <!--label="驳回理由"-->
                                <!--prop="reason"-->
                        <!--&gt;-->
                            <!--<el-input-->
                                    <!--v-model="paramsStr.reason"-->
                                    <!--style="width:70%;margin-right:6%;"-->
                            <!--&gt;-->
                            <!--</el-input>-->
                            <!--<el-button type="primary" @click="configReject">驳回</el-button>-->
                        <!--</el-form-item>-->
                    <!--</el-form>-->
                <!--</el-dialog>-->
            </el-dialog>

        <!-- dialog end -->
    </div>
</template>

<script>
    import tableDataEl from '@/views/Setup/common/table'
    export default {
        name: "applyingWl",
        data () {
            return {
                page: 1,
                pageSize: 8,
                search: '',
                tableData: {},
                tableLabel: [
                    {
                        label: '维修厂名称',
                        prop: 'company'
                    },
                    {
                        label: '负责人',
                        prop: 'leader'
                    },
                    {
                        label: '联系方式',
                        prop: 'phone'
                    },
                    {
                        label: '申请时间',
                        prop: 'create_time'
                    },
                    {
                        label: '物料详情',
                        detail: true,
                        btnText: '详情',
                        methodName: 'handleDetail'
                    }
                ],
                isShowDetail: false,
                inputReason: false,
                detailData: {},
                gysArray:{},
                paramsStr:{
                    id: '',
                    gid: '',
                    phone: '',
                    reason: ''
                },
                loading: false,
                detailLoading: false,
                rules:{
                    reason: [
                        {required: true,message: '请输入驳回理由', trigger: 'blur'}
                    ]
                }

            }
        },
        components: {
            tableDataEl
        },
        methods: {
            async init (search = '') {
                this.loading = true;
                let valueStr = Object.assign(search,{page: this.page, pageSize: this.pageSize})
                let res = await this.api.lbAuditList(valueStr);
                this.tableData = res.data;
                this.loading = false;
            },
            async handleDetail (...value) {
                this.isShowDetail = true;
                this.detailLoading = true;
                this.paramsStr['id'] = value[1]['id'];
                this.paramsStr['phone'] = value[1]['phone'];
                let res = await this.api.detail({id: value[1]['id']})
                this.detailData = res.data.list;
                this.gysArray = res.data.gid_array;
                this.detailLoading = false;
            },
            async adopt () {
                delete this.paramsStr['reason'];
                if(this.paramsStr['gid']) {
                    let res = await this.api.adopt(this.paramsStr);
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                    this.init();
                    this.isShowDetail = false
                }else {
                    this.$message({
                        type: 'error',
                        message: '请选择供应商！'
                    })
                }
            },
            // reject () {
            //     this.inputReason = true;
            // },
            // async configReject () {
            //     let flag = true;
            //     this.$refs['childform'].validate((valid) => {
            //         if(!valid) {
            //             flag = false
            //         }
            //     });
            //     if(flag) {
            //         if(this.paramsStr.gid == '') {
            //             this.$message({
            //                 type: 'error',
            //                 message: '请选择运营商'
            //             })
            //         }else{
            //             let res = await this.api.reject(this.paramsStr);
            //             this.$message({
            //                 type: 'success',
            //                 message: res.msg
            //             });
            //             this.init();
            //             this.isShowDetail = false;
            //             this.inputReason = false;
            //         }
            //     }
            // }
        },
        mounted () {
            this.init();
        },
        watch: {
            page () {
                this.init();
            },
            pageSize () {
                this.init();
            }
        }
    }
</script>

<style scoped>
    .pad {
        padding:10px;
        box-sizing:border-box;
    }
    .left {
        width:40%;
        float:left;
    }
    .right {
        width:60%;
        float:right;
        /*background-color:red;*/
    }
    .el-form-item {
        margin-bottom:5px;
    }
</style>
